<template>
  <div>
    <el-drawer title="备注" v-model="visible" :size="1000">
      <template #header>
        <div class="flex items-center title">
          <div class="w-[5px] h-[5px] rounded-[50%] bg-[#3721FF] mr-[10px] circle"></div>
          <div class="tits">备注</div>
        </div>
      </template>
      <div class="w-full h-[1px] bg-[#EFEFEF] line"></div>
      <div class="pt-[30px]">
        <el-form :model="form" label-width="0px">
          <el-form-item label="">
            <el-input type="textarea" :rows="6" v-model="form.remark" placeholder="请输入..." />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="drawer-footer">
          <el-button class="w-[108px] h-[45px] rounded-[10px] text-[12px]" @click="hide"
            >取消</el-button
          >
          <el-button
            class="w-[108px] h-[45px] rounded-[10px] text-[12px]"
            type="primary"
            color="#3721ff"
            @click="onSubmit"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['updateRemark'])
const props = defineProps({
  remarkOrderNo: {
    type: [String, Number],
    required: true,
    default: ''
  },
  remarkInfo: {
    type: String,
    default: ''
  }
})
type RemarkInfo = {
  remark: string
  id: string | number
}
const form = ref<RemarkInfo>({
  remark: '',
  id: ''
})

watch(
  () => [props.remarkOrderNo, props.remarkInfo],
  ([orderNo, remarkInfo]) => {
    form.value.remark = String(remarkInfo || '')
    form.value.id = orderNo
  },
  { immediate: true, deep: true }
)

const visible = ref(false)

/**
 * 提交备注
 */
const onSubmit = () => {
  if (!form.value.remark) {
    return ElMessage.error('请输入备注')
  }
  emit('updateRemark', { orderNo: [form.value.id], remark: form.value.remark })
}

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
:deep(.el-select__wrapper) {
  height: 40px !important;
}
:deep(.el-input__wrapper) {
  height: 40px !important;
}
</style>
